﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐天商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        .logo-list li {
            padding: 8px;
        }

        .logo-list li:hover {
            background-color: #f3f3f3;
        }

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>


    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li><a href="#">手机</a></li>
                    <li><span>手机通讯</span></li>
                </ul>
                <!--已选择过滤项-->
                <ul class="tags-choose">
                    <!--这里遍历的是个对象，里面是k和v-->
                    <li class="tag" v-for="(v,k) in search.filter" :key="k">
                        {{k === 'brandId' ? '品牌' : k}}:<span style="color: red" v-text="findValue(k,v)"></span>
                        <i class="sui-icon icon-tb-close" @click="deleteFilter(k)"></i>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector  用户进行搜索商品可选的过滤项-->
            <div class="clearfix selector">
                <!--遍历选好过滤集合，由于只有品牌的过滤项的样式选择不一样，所以这里有个if判断
                    (f,j)  v-show="j < 5= || showMore" 为了展示隐藏规格参数，这里后面加这些，为了一开始默认显示5行条件，或者这个表示为true就展示全部
                -->
                <div class="type-wrap" v-for="(f,j) in remainFilter" v-show="j <= 5 || showMore" :key="f.k"
                     v-if="f.k != 'brandId'">
                    <div class="fl key" v-text="f.k == 'cid3' ? '分类' : f.k"></div>
                    <div class="fl value">
                        <ul class="type-list">
                            <!--这里由于f.options是个数组，我们这里这样可以遍历还可以将其下标作为key
                                这里最好做个判断，防止有的规格参数的可选项是空的:如果o为空就是false
                            -->
                            <li v-for="(o,i) in f.options" :key="i" v-if="o" @click="selectFilter(f.k,o.id || o)">
                                <!--这里为什么有个或者，因为options在品牌和分类中是个对象，然后在规格参数中只是字符串-->
                                <a v-text="o.name || o"></a>
                            </li>

                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">品牌</div>
                    <div class="value logos">
                        <ul class="logo-list" v-for="(o,i) in f.options" :key="i">
                            <li v-if="o.image"><img :src="o.image" @click="selectFilter(f.k,o.id || o)"></li>
                            <li v-else><a href="#" v-text="o.name" @click="selectFilter(f.k,o.id || o)"></a></li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>

                <!--remainFillter.length > 5 正对用户筛选的时候到一定程度，影藏-->
                <div class="type-wrap" style="text-align: center" v-show="remainFilter.length > 5">
                    <v-btn small flat v-show="!showMore" @click="showMore=true">
                        更多
                        <v-icon>arrow_drop_down</v-icon>
                    </v-btn>
                    <v-btn small="" flat v-show="showMore" @click="showMore=false">
                        收起
                        <v-icon>arrow_drop_up</v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li class="active">
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <li>
                                <a href="#">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <li>
                                <a href="#">价格</a>
                            </li>
                        </ul>
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                            <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                            <a class="btn-arrow" href="#" style="display: inline-block"
                               @click.prevent="prePage">&lt;</a>
                            <a class="btn-arrow" href="#" style="display: inline-block"
                               @click.prevent="nextPage">&gt;</a>
                        </div>
                    </div>
                </div>
                <!--商品信息：每个li代表一个商品-->
                <div class="goods-list">
                    <ul class="yui3-g">
                        <!--v-for遍历集合、给他一个key为了保证高效，不给也可以-->
                        <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <!--:src="goods.selectedSku.image" 显示当前被选中的具体sku-->
                                    <a :href="'/item/'+goods.id+'.html'" target="_blank"><img :src="goods.selectedSku.image"
                                                                             height="200"/></a>
                                    <ul class="skus">
                                        <!--
                                            1.遍历skus 需要注意的是选中判断 用当前判断默认选择的sku的id 和当前遍历到的sku的id比较，一样就选中
                                            2.同时有个鼠标移上事件，移到谁就让当前选择的sku变为当前遍历的这个sku(这里由于goods.selectedSku变了，vue渲染双向绑定使切换变得十分简单)
                                        -->
                                        <li :class="{selected: goods.selectedSku.id ==sku.id}" v-for="sku in goods.skus"
                                            @mouseenter="goods.selectedSku=sku"
                                            :key="sku.id">
                                            <img :src="sku.image">
                                        </li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <!--由于这里是分单位，我们自作这个方法转成元-->
                                        <i v-text="ly.formatPrice(goods.selectedSku.price)"></i>
                                    </strong>
                                </div>
                                <div class="attr">
                                    <em v-text="goods.selectedSku.title.substring(0,21) + '..'"></em>
                                </div>
                                <div class="cu">
                                    <!--子标题 卖点-->
                                    <!--注意这里的子标题里面有html-->
                                    <em><span>促</span>{{goods.subTitle.substring(0,15) + '..'}}</em>
                                </div>
                                <div class="commit">
                                    <i class="command">已有2000人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                </div>
                            </div>
                        </li>
                        <!--原始假数据：未与vue绑定数据-->
                        <!--<li class="yui3-u-1-5">-->
                        <!--<div class="list-wrap">-->
                        <!--<div class="p-img">-->
                        <!--<a href="item.html" target="_blank"><img src="img/_/mobile01.png" height="200"/></a>-->
                        <!--<ul class="skus">-->
                        <!--<li class="selected"><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--<li class=""><img src="img/_/mobile01.png"></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--<div class="price">-->
                        <!--<strong>-->
                        <!--<em>¥</em>-->
                        <!--<i>6088.00</i>-->
                        <!--</strong>-->
                        <!--</div>-->
                        <!--<div class="attr">-->
                        <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                        <!--</div>-->
                        <!--<div class="cu">-->
                        <!--<em><span>促</span>满一件可参加超值换购</em>-->
                        <!--</div>-->
                        <!--<div class="commit">-->
                        <!--<i class="command">已有2000人评价</i>-->
                        <!--</div>-->
                        <!--<div class="operate">-->
                        <!--<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>-->
                        <!--<a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--原始假数据：未与vue绑定数据-->

                    </ul>
                </div>
                <!--分页-->
                <div class="fr">
                    <div class="sui-pagination pagination-large">
                        <ul>
                            <!--prev是样式肯定一值要用，当前页等于1禁用按钮-->
                            <li :class="{prev:true, disabled: search.page==1}">
                                <!--加了个prevent是阻止默认事件发生，否则页面将闪动-->
                                <a href="#" @click.prevent="prePage">«上一页</a>
                            </li>
                            <!--遍历的同时：判断data中的当前页是否等于当前遍历的，为了对应选中.还有当前页少于5的时候我们取最小-->
                            <li :class="{active: index(i) == search.page}" v-for="i in Math.min(5, totalPage)" :key="i">
                                <a href="#" v-text="index(i)"></a>
                                <!--需要注意的是这个index函数，我们自定义是为了当他大于3的时候对页码条进行更改-->
                            </li>
                            <!--当前页加二还小于总页数那么就显示这个点，并且总页数大于5才显示-->
                            <li class="dotted" v-show="search.page+2<totalPage && totalPage>5"><span>...</span></li>
                            <li :class="{next:true, disabled: search.page==totalPage}">
                                <a href="#" @click.prevent="nextPage">下一页»</a>
                            </li>
                        </ul>
                        <div><span>共{{totalPage}}页&nbsp;</span><span>
      到第
      <input type="text" class="page-num">
      页 <button class="page-confirm" onclick="alert(1)">确定</button></span></div>
                    </div>
                </div>
            </div>
            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly, //这个放入data，页面才可以用这个对象的功能，例如ly.formatPrice，吧分转化为元单位
            search: {},
            goodsList: [], //里面包含所有的spu商品，包括所有的sku
            total: 0,
            totalPage: 0,
            filters: [], //过滤项（里面存key value 集合 ，其中value条件可选项）,有什么需要过滤的都往这里面塞入，同时也方便渲染
            showMore: false, //定义一个表示，是否显示更多规格参数
        },
        created() {  //当这个搜索页面一加载的时候（这个是个生命周期函数）

            //获取用户搜索的key请求参数（比如：http://www.lottemall.com/search.html?key=手机）

            //得到url请求？后面的内容,并且转化为jison对象
            const search = ly.parse(location.search.substring(1));
            //判断当前data中的search是否有值，如果第一个有值就是第一个，没有值就是第二个默认为1 (为了分页组件中判断如何选中当前页)
            search.page = search.page ? parseInt(search.page) : 1; //注意有个小细节我们需要的是整形哦  (初始化分页)
            //进行判断下是否有过滤项，没有就弄个空的，以备用户后续点击 （初始化过滤条件）
            search.filter = search.filter ? search.filter : {};
            // console.log("第一次"+search.filter);
            this.search = search;
            //调用方法
            this.loadData();
        },
        watch: {
            //主要监控这个search（搜索商品需要发送到后台的数据）的变化
            search: {
                deep: true, //深度监控
                handler(val, oldval) { //监控到的新值、监控到的以前的旧值
                    //this.loadData();//触发这个方法（但是这个方法不是明智的，当一刷新页面，我们的搜索结果将重新归零）

                    //oldval或oldval.key不为空，代表是第一次页面加载created从而改变search，防止来到这里又跳转页面，防止死循环
                    if (!oldval || !oldval.key) {
                        return;//直接返回，不进行下面的跳转  {需要说明的一点，虽然这里保留了用户搜索结果但是页面重新加载了，影响效果，其实可选可以直接使用this.loadData()}
                    }
                    //所以把参数写到url中(stringify是吧json对象变成字符串，京东好像也是这样做的)
                    location.search = "?" + ly.stringify(this.search);
                },
            }
        },
        methods: {
            loadData() { //加载用户是搜索的数据
                //发送到后台.这里我们使用post，因为我么你要把search对象发到后台，进行搜索，返回给前台
                ly.http.post("/search/page", this.search).then(resp => {
                    console.log("进入loadData" + resp);
                    //保存分页结果
                    this.total = resp.data.total;
                    this.totalPage = resp.data.totalPage;

                    //把每个sku取出来（注意一个商品有多个sku）
                    resp.data.items.forEach(goods => {
                        //把json处理成js对象，这里进行覆盖,为了我们等下还渲染数据
                        goods.skus = JSON.parse(goods.skus);
                        //默认初始化被选中的sku（在里面定义一个临时变量，来标识当前spu中skus中的具体的sku）
                        goods.selectedSku = goods.skus[0];
                    });

                    //保存当前页商品
                    this.goodsList = resp.data.items;
                    //上面赋值商品后，这里进行聚合结果（根据用户搜索结果得到的商品对应从索引库中聚合得到应该有的品牌和类型，而不是全部查出），形成过滤项
                    //处理商品分类聚合结果  push是往里面塞数据
                    this.filters.push({
                        k: "cid3", //因为之后点击这些过滤条件进行搜索的时候，要跟着传入后台，这个有依据的，要和索引库中的字段一样最方便
                        options: resp.data.categories
                    });
                    //处理商品品牌聚合结果  push是往里面塞数据
                    this.filters.push({
                        k: "brandId",
                        options: resp.data.brands
                    });

                    //处理规格参数 (这里遍历徐循环集合，然后去的对应规格，塞进filters中)
                    resp.data.specs.forEach(spec => this.filters.push(spec));


                }).catch(error => { //失败后的回调函数

                });
            },
            index(i) {
                //如果当前页小于3,或者总页小于5的时候
                if (this.search.page <= 3 || this.totalPage < 5) {
                    //直接把i作为当前页
                    return i;
                } else if (this.search.page >= this.totalPage - 2) { //当前前页大于等于总页减2的时候，我们就
                    return this.totalPage - 5 + i; //防止我们点击下一页的时候页码显示超出总页数
                } else { //需要注意的是这里的i始终都只是1-5哦，只是根据this.search.page页面当前显示的页的不同，和this.totalPage数据总页数限制条件返回的不同
                    return i + this.search.page - 3;//这样页码就可以逐渐递增，而不是我们一开始弄得死的1-5
                    // 虽然这有点不符合常规，但是vue就是这样，他可以通过数据的改变来渲染，这里每次this.search.page增加一次，返回的值就跟着增加
                }
            },
            prePage() { //上一页
                if (this.search.page > 1) this.search.page--;
            },
            nextPage() { //下一页
                if (this.search.page < this.totalPage) this.search.page++;
            },
            selectFilter(k, o) { //需要过滤项的key 和其对应用户点击的可选项  （里面需要注意的是    allowDots: true,）

                //从filter复制属性到obj  (因为要把以前的已有的过滤项得到，还有就是search.filter，在create中但是只是空的，vue监控不了他的数据变化，所以可以直接改变filter)
                const {...obj} = this.search.filter;
                //对obj进行操作
                obj[k] = o;

                //添加到search.filter中
                // this.search.filter[k] = o; //这里需要注意的是，这里要做的是key对应的option (js可以动态的添加key是变量的方式)

                //所以这里直接改变filter  (filter的地址发生改变 )
                this.search.filter = obj;

                // const obj = {};
                // Object.assign(obj, this.search);
                // if (k === '分类' || k === '品牌') {
                //     o = o.id;
                // }
                // obj.filter[k] = o.name;
                // this.search = obj;


            },
            findValue(k, v) {
                //首先防止待选参数不为空
                if (!this.filters) {
                    return;
                }
                if (k !== 'brandId') return v;
                //去待过滤项中去找k等于这个的那一个对象，然后得到他的名字，就是品牌名字
                return this.filters.find(f => f.k === 'brandId').options[0].name;
            },
            deleteFilter(k){
                const {...obj} = this.search.filter;
                delete obj[k];
                this.search.filter = obj;
            },
        },
        computed: {
            remainFilter() {
                //完成对已选择的过滤项的过滤

                //获取已选择的项的key  (这个方法可以得到filter中所有的key)
                const keys = Object.keys(this.search.filter);

                //对待展示的filters过滤项进行 过滤，判断已选择的key是否包含待选项中的key，如果包含了就是true，这里取反，就是刚好遍历到某个就被过滤掉，
                // 不存在我们才要，因为我们要显示的是用户没有点击的过滤项
                //并且当过滤项大于1的时候才要
                return this.filters.filter(f => !keys.includes(f.k) && f.options.length > 1);//大概意思是filter这个方法，遍历这个集合，每次判断，没有有已选和和项大于1我们才展示给用户看的过滤项 （里面为true是要，为false代表该遍历到的项不用要）
            }
        },
        components: {
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>